<template>
	<view style="overflow: hidden;">
		<image :src="background_img ? background_img : ossUrl + `/static/index/13.png`" mode="widthFix" class="bg1">
		</image>
		<view class="content">
			<!-- <image :src="ossUrl + `/static/index/3.png`" class="bg2"></image> -->
			<view style="background: #F6F7F8;" class="bg2"></view>
			<!-- <image :src="ossUrl + `/static/index/菜单.png`" class="setting" :style="{top:top + 'px'}"></image> -->
			<HeaderBar title="编辑资料" :opacity="opacity" />

			<!-- <div class="userinfo">
				<view class="userinfo-name">{{ form.nickname || '' }}</view>
				<view class="userinfo-zc" v-if="form.identity">{{ form.identity || '' }}</view>
				<view class="userinfo-gs">{{ form.company || '' }}</view>
				<view class="userinfo-zy" v-if="form.mobile">

					<image :src="ossUrl + `/static/editData/2.png`" mode=""></image>
					<view>{{form.mobile}}</view>
				</view>
				<view class="userinfo-zy" v-if="form.address">
					<image :src="ossUrl + `/static/editData/1.png`" mode=""></image>
					<view> {{form.address || '暂未填写地址'}}</view>
				</view>
			</div> -->
			<view class="hb-img" v-if="info">
				<card ref="cardRef" />
				<view class="real_name" v-if="info.real_name === 1">
					<image :src="ossUrl + `/static/image/vip/${info.vip === 1 ? 2 : 1}.png`"
						v-if="!is_vip && info.vip === 1" mode="widthFix"></image>
					实名
				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-item" @click="toPage()" style="padding-top: 0;">
						<view class="form-item-label">名片样式</view>
						<view class="input tx-r">
							<view class="input-tx">更换名片与背景</view>
							<image :src="ossUrl + `/static/editData/3.png`"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="form">
				<view class="vip" @click="pay">
					<image :src="info.customized" mode="widthFix"></image>
				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title flex-row-between">
						个人履历
						<view class="card-title-r">
							<view class="card-title-r-item" @click="openList">
								<span>
									同步履历
								</span>
							</view>
						</view>
					</view>
					<!-- <view class="form-list-add" @click="toAddResume(id)" v-if="career.length === 0">
						<image :src="ossUrl + `/static/editData/21.png`"></image>
						添加个人履历
					</view> -->
					<!-- <view class="lvli" @click="toAddResume(id)" v-else>
						<view class="lvli-list" v-for="(it,index) in career">
							<view class="lvli-list-left">
								<view class="lvli-list-spot">
									<image :src="ossUrl + `/static/index/21.png`" mode=""></image>
								</view>
								<view class="lvli-list-line" v-if="index != (career.length - 1)"></view>
							</view>
							<view class="lvli-list-rig"
								:style="{paddingBottom: index === (career.length - 1) ? '0rpx' : '81rpx'}">
								{{it}}
							</view>
						</view>
					</view> -->
					<view class="box-content lvli">
						<view class="lvli-list">
							<view class="lvli-list-left">
								<!-- <view class="lvli-list-spot">
									<image :src="ossUrl + `/static/index/21.png`" mode=""></image>
								</view> -->
								<view class="lvli-list-line" v-if="career.length > 0"></view>
							</view>
							<view class="lvli-list-rig"
								:style="{paddingBottom: career.length === 0 ? '0rpx' : '81rpx'}">
								<view class="lvli-list-rig-btn" @click="lvadd">
									<image :src="ossUrl + `/static/editData/添加.png`" mode=""></image>
								</view>
							</view>
						</view>



						<view class="lvli-list" v-for="(it,index) in career">
							<view class="lvli-list-left">
								<view class="lvli-list-spot">
									<image :src="ossUrl + `/static/index/21.png`" mode=""></image>
								</view>
								<view class="lvli-list-line" v-if="index < (career.length - 1)"></view>
							</view>


							<view class="lvli-list-rig"
								:style="{paddingBottom: index === (career.length - 1) ? '0rpx' : '81rpx'}">


								<view class="lvli-list-rig-content" v-if="!it.isEdit">
									<view class="lvli-list-rig-tx">
										{{it.label}}
									</view>
									<image :src="ossUrl + `/static/editData/5.png`" mode="" @click="lvsetShow(it)">
									</image>
									<view class="lvli-list-rig-content-edit" v-if="it.show">
										<view @click="lvdel(index)">
											<image :src="ossUrl + `/static/editData/删除.png`" mode=""></image>
											删除
										</view>
										<view @click="lvsetEdit(it)">
											<image :src="ossUrl + `/static/editData/4.png`" mode=""></image>
											修改
										</view>
									</view>
								</view>

								<view class="lvli-list-rig-input" v-else>
									<textarea placeholder="请输入" placeholder-class="ac" v-model="it.label"
										:cursor-spacing="110" />
                                    <view @click="lvdel(index)">
                                    	<image :src="ossUrl + `/static/editData/删除.png`" mode=""></image>
                                    </view>
			
								</view>


							</view>
						</view>


					</view>
				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title">基本信息</view>
					<view class="form-item">
						<view class="form-item-label">头像<text>*</text></view>
						<view class="input upload">
							<view class="upload-item">
								<image :src="form.head" mode="" v-if="form.head" style="border-radius: 50%;"></image>
								<image :src="ossUrl + `/static/editData/6.png`" mode="" v-else @click="selectClick">
								</image>
								<!-- <text @click="selectClick">点击上传头像</text> -->
								<button class="acvter_all chooseavatar" open-type="chooseAvatar"
									@chooseavatar="onChooseAvatar" @click="settrue">
									<view class="mast">请点击选择头像</view>
								</button>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">姓名<text>*</text></view>
						<view class="input upload">
							<input type="text" :disabled="info.real_name == 1?true:false" placeholder="请输入姓名"
								placeholder-class="ac" v-model="form.nickname">
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">公司</view>
						<view class="input upload">
							<input type="text" placeholder="请输入公司/地址" placeholder-class="ac" v-model="form.company">
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">公司详址</view>
						<view class="input select">
							<!-- <view class="input-tx">{{form.address || '请选择定位地址'}}</view>
							<image :src="ossUrl + '/static/card/2.png'" mode="widthFix" class="map-r"></image> -->
							<input type="text" placeholder="请选择定位地址" placeholder-class="ac" v-model="form.address">
							<view class="icon" @click="getLocation">
								<uni-icons custom-prefix="iconfont" :color="form.lat ? '#49B4FF' : '#999999'"
									type="icon-dingwei" size="18"></uni-icons>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">领域<text>*</text></view>
						<view class="input select" @click="open">
							<view class="input-tx">{{form.identity || '请选择您的领域'}}</view>
							<image :src="ossUrl + `/static/editData/3.png`"></image>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">性别</view>
						<view class="input radio">
							<view :class="form.sex === '女' ? 'input-radio input-radio-ac' : 'input-radio'"
								@click="setSex('女')">
								<image :src="ossUrl + `/static/setting/${form.sex === '女' ? '3' : '4'}.png`" mode="">
								</image>
								女
							</view>
							<view :class="form.sex === '男' ? 'input-radio input-radio-ac' : 'input-radio'"
								@click="setSex('男')">
								<image :src="ossUrl + `/static/setting/${form.sex === '男' ? '1' : '2'}.png`" mode="">
								</image>
								男
							</view>
						</view>
					</view>
					<!-- <picker mode="date" @change="change">
						<view class="form-item">
							<view class="form-item-label">出生日期</view>
							<view class="input select">
								<view class="input-tx">{{form.birthday || '请选择您的出生日期'}}</view>
								<image :src="ossUrl + `/static/editData/3.png`"></image>
							</view>
						</view>
					</picker> -->
					<!-- <view class="form-item">
						<view class="form-item-label">球龄</view>
						<view class="input upload">
							<input type="number" placeholder="请输入球龄" placeholder-class="ac" v-model="form.years">
						</view>
					</view> -->
				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title">联系方式</view>
					<view class="form-item">
						<view class="form-item-label">手机<text>*</text></view>
						<view class="input upload">
							<button style="width: 127px;" open-type="getPhoneNumber" @getphonenumber="btns">
								<input type="number" disabled placeholder="请输入手机号" placeholder-class="ac"
									v-model="form.mobile" style="text-align: left;" :disabled="true" />
							</button>

							<switch :checked="privacyFrom.PhoneStatus === 0" color="#12B475"
								style="transform:scale(0.9)" @change="e=>privacyChange(e,'PhoneStatus')" />
							<view class="input-subTitle">{{privacyFrom.PhoneStatus === 1 ? '好友可见' : '公开'}}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">微信</view>
						<view class="input upload">
							<input type="text" placeholder="请输入微信" placeholder-class="ac"
								v-model="form.wechat_number" />
							<view class="icon" @click="openQrCodePopup">
								<uni-icons custom-prefix="iconfont" type="icon-erweima" size="22"
									color="#23B97F"></uni-icons>
							</view>
							<switch :checked="privacyFrom.wxStatus === 0" color="#12B475" style="transform:scale(0.9)"
								@change="e=>privacyChange(e,'wxStatus')" />
							<view class="input-subTitle">{{privacyFrom.wxStatus === 1 ? '好友可见' : '公开'}}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-label">邮箱</view>
						<view class="input upload">
							<input type="text" placeholder="请输入邮箱" placeholder-class="ac" v-model="form.mailbox">
							<switch :checked="privacyFrom.mailboxStatus === 0" color="#12B475"
								style="transform:scale(0.9)" @change="e=>privacyChange(e,'mailboxStatus')" />
							<view class="input-subTitle">{{privacyFrom.mailboxStatus === 1 ? '好友可见' : '公开'}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title" style="border-bottom: none;">宣言</view>
					<view class="form-list-add">
						<textarea placeholder="请输入" placeholder-class="ac" v-model="form.declaration"
							:cursor-spacing="110" />
					</view>
				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title">实拍展示</view>
					<view class="form-item">
						<view class="form-item-label">是否显示</view>
						<view class="input upload" style="justify-content: flex-end;">
							<switch :checked="form.is_picture === 1" color="#12B475" style="transform:scale(0.9)"
								@change="e=> form.is_picture = e.detail.value ? 1 : 0" />
							<view class="input-subTitle">{{form.is_picture === 1 ? '是' : '否'}}</view>
						</view>
					</view>
				</view>
			</view>
			<block v-if="circle_type != 1">
				<view class="form">
					<view class="form-list">
						<view class="form-list-title">企业/组织简介</view>
						<view class="form-item">
							<view class="form-item-label">是否显示</view>
							<view class="input upload" style="justify-content: flex-end;">
								<!-- <input type="text" placeholder="请输入邮箱" placeholder-class="ac" v-model="form.mailbox"> -->
								<switch :checked="form.enterprise === 1" color="#12B475" style="transform:scale(0.9)"
									@change="e=> form.enterprise = e.detail.value ? 1 : 0" />
								<view class="input-subTitle">{{form.enterprise === 1 ? '是' : '否'}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- v-if="circle.status != 0 && circle.can_upload != 0" -->

			</block>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title flex-row-between">
						项目PPT
						<view class="card-title-r">
							<view class="card-title-r-item" @click="uploadPdf"
								v-if="circle.card_pdf.length > 0 && circle.can_upload != 0">
								<span><uni-icons custom-prefix="iconfont" type="icon-jiahao-fill" size="16"
										color="#23B97F"></uni-icons></span>
								<span style="margin-left: 10rpx;">
									添加
								</span>
							</view>
							<view class="card-title-r-item" @click="openFilePopup"
								v-if="circle.can_upload === 1 && (circle_type === 2 || circle_type === 3)">
								<span><uni-icons custom-prefix="iconfont" type="icon-jiahao-fill" size="16"
										color="#23B97F"></uni-icons></span>
								<span style="margin-left: 10rpx;">
									企业/组织共享
								</span>
							</view>
						</view>
					</view>
					<div class="form-list-c" @click="circle.can_upload != 0 ? uploadPdf() : openMember(2)"
						v-if="circle.card_pdf.length === 0">
						<view class="form-list-c-add">
							+ 添加PDF文件
						</view>
						<view class="form-list-c-tx">
							<view>vip和企业/组织可添加对外合作方案、个人作品、产品介绍等文档</view>
							<view>仅支持单个PDF上传，最大10MB</view>
						</view>
					</div>
					<view class="form-list-files" v-if="circle.card_pdf.length > 0">
						<view class="form-list-files-item" v-for="(item,index) in circle.card_pdf"
							@click="openFile(item.url)">
							<view class="form-list-files-item-img">
								<!-- <image src="https://picsum.photos/200/300" mode=""></image> -->
								<image :src="item.url + '?ci-process=doc-preview&page=1&width=100'"></image>
							</view>
							<view class="form-list-files-item-c">
								<view class="form-list-files-item-c-t">
									<view class="form-list-files-item-c-title ellipsis">{{item.name || ''}}</view>
									<view class="form-list-files-item-c-project" v-if="item.type == 2">（共享项目）</view>
								</view>
								<view class="form-list-files-item-c-time">{{item.create_time || ''}}</view>
							</view>
							<picker mode="selector" :range="menu" range-key="label" @change="e => changeMenu(e,item)">
								<view class="form-list-files-item-r flex-row-center">
									<view class="del" @click.stop="changeMenu(1, item)">删除</view>
								</view>
							</picker>
						</view>
					</view>

				</view>
			</view>
			<view class="form" v-if="info.certificate === 1">
				<view class="form-list">
					<view class="form-list-title">证书展示</view>
					<view class="form-item">
						<view class="form-item-label">是否显示</view>
						<view class="input upload" style="justify-content: flex-end;">
							<switch :checked="form.is_certificate === 1" color="#12B475" style="transform:scale(0.9)"
								@change="e=> form.is_certificate = e.detail.value ? 1 : 0" />
							<view class="input-subTitle">{{form.is_certificate === 1 ? '是' : '否'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="form" v-if="info.certificate === 1">
				<view class="form-list">
					<view class="form-list-title flex-row-between">
						组织证书
						<view class="card-title-r">
							<view class="card-title-r-item" @click="applyCertificate">
								<span><uni-icons custom-prefix="iconfont" type="icon-jiahao-fill" size="16"
										color="#23B97F"></uni-icons></span>
								<span style="margin-left: 10rpx;">
									申请新证书
								</span>
							</view>
						</view>
					</view>
					<view class="card-certificate">
						<view class="card-certificate-item" v-for="it in info.certificate_arr_user"
							@click="MpreviewImage([it.certificate], 0)">
							<view class="card-certificate-item-img">
								<image :src="it.certificate" mode="widthFix"></image>
							</view>
							<view class="card-certificate-item-tx">{{it.name}}</view>
							<view class="card-certificate-item-time">（剩余{{it.remaining_days || 0}}天）</view>
						</view>
					</view>

				</view>
			</view>


			<privacySet></privacySet>
			<!-- 	<view class="form">
				<view class="form-list">
					<view class="form-list-title">上传相关资质证书</view>
					<view class="form-list-add">
						<image :src="ossUrl + `/static/editData/21.png`"></image>
						添加相关资质证书
					</view>
				</view>
			</view>
			<view class="form">
				<view class="form-list">
					<view class="form-list-title">上传场地实拍</view>
					<view class="form-list-add">
						<image :src="ossUrl + `/static/editData/21.png`"></image>
						添加场地实拍
					</view>
				</view>
			</view> -->

			<view class="form-btn" @click="submit">保存</view>
			<!-- 名片交换请求 -->
			<!-- view. -->
			<!-- 占位 -->
			<u-gap height="80"></u-gap>
		</view>
		<ElectPopup ref="selectRef" v-model="form.identity" />
		<l-painter :board="template" style="width: 100%;" ref="painterRef" custom-style="position: fixed; left: 200%" />
		<FileListVue ref="FileListVueRef" @change="FileListVueChange" />
		<!-- 会员弹窗 -->
		<MemberPopupVue ref="MemberPopupVueRef" @reload="e => member_type === 1 ? reload() : getFileList()" />
		<!-- 同步 -->
		<addFriendsVue ref="addFriendsVueRef" @submit="submitTb" :businessCard="info.id"
			:otherId="info.business_card" />
		<!-- 微信二维码 -->
		<QrCodePopup ref="QrCodePopupRef" @submit="e => form.WeChat_QR_code = e" />

		<!-- 证书 -->
		<CertificateVue ref="CertificateVueRef" :id="id" @cancelshow='settrue' @reload="reload()" />
	</view>
</template>

<script>
	import HeaderBar from "@/components/header/header.vue";
	import ElectPopup from './components/selectPopup/selectPopup.vue'
	import card from '@/components/card/card.vue'
	import FileListVue from "./components/fileList/fileList.vue";
	import CertificateVue from "./components/certificate/certificate.vue";
	import MemberPopupVue from '@/components/memberPopup/memberPopup.vue'
	import addFriendsVue from "./components/addFriends/addFriends.vue";
	import QrCodePopup from './components/qrCodePopup/qrCodePopup.vue'
	import privacySet from './components/privacySet.vue'
	import {
		openMap,
		goMap
	} from '@/common/map.js'
	import {
		uploadImg,
		uploadVideo,
		uploadDel,
		uploadFile
	} from '@/common/upload.js'
	import {
		ossUpload,
		ossDel
	} from '@/common/oss.js'
	import {
		InformationBusinessCard,
		InformationEditBusinessCard,
		InformationCareer,
		InformationUserBusinessCardHeadData,
		InformationStyleSaving,
		InformationShareStylesSaving,
		InformationUserInfo,
		InformationWxeditWx,
		InformationUserPrivacySetUp,
		LoginPhone,
		card_circle_pdf,
		InformationEditCareer,
		goodsPay,
		distributionProductDetails
	} from '@/common/http/api.js'
	export default {
		components: {
			HeaderBar,
			privacySet,
			ElectPopup,
			card,
			FileListVue,
			MemberPopupVue,
			addFriendsVue,
			QrCodePopup,
			CertificateVue
		},
		data() {
			return {
				form: {
					id: '',
					nickname: '',
					identity: '',
					style: '',
					company: '',
					head: '',
					mobile: '',
					mailbox: '',
					address: '',
					declaration: '',
					sex: '女',
					birthday: '',
					years: '',
					wechat_number: '',
					enterprise: 1,
					is_picture: 1,
					WeChat_QR_code: '',
					lat: '',
					lng: '',
					is_certificate: 1
				},
				identity: {
					name: '',
					id: ''
				},
				info: '',
				id: '',
				career: [],
				background_img: '',
				cardStyleInfo: '',
				template: {},
				opacity: 0,
				userInfo: {},
				privacyFrom: {
					PhoneStatus: 0,
					mailboxStatus: 0,
					wxStatus: 0
				},
				isAuthPhone: true,
				is_onShow: false,
				circle: {
					status: 0,
					can_upload: 0,
					card_pdf: [],
					circle_pdf: []
				},
				menu: [{
					value: 1,
					label: '删除'
				}],
				circle_type: 1, // 1兴趣圈子 2 企业 3 组织
				circle_id: 0,
				member_type: 1, // 1vip  2pdf
				goodsInfo: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			InformationUserInfo().then(res => {
				this.userInfo = res.data
				this.privacyFrom.PhoneStatus = res.data.PhoneStatus
				this.privacyFrom.mailboxStatus = res.data.mailboxStatus
				this.privacyFrom.wxStatus = res.data.wxStatus
			})

			this.gethead()
		},
		onShow() {
			if (this.is_onShow) {
				this.is_onShow = false
				return
			}
			this.reload()
			InformationCareer({
				business_card_id: this.id
			}).then(res => {
				if (Array.isArray(res.data) && res.data.length > 0) {
					this.career = res.data.map(i => ({
						label: i,
						show: false,
						isEdit: false
					}))
				} else {
					this.add()
				}
			})
			this.getFileList()
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop
			// 计算透明度值
			this.opacity = Math.min(scrollTop / 100, 1);
		},
		watch: {
			'form.nickname': {
				handler(val) {
					console.log('val', val)
					this.cardStyleInfo.user.nickname = val
					this.setCardStyle()
				},
				deep: true
			},
			'form.company': {
				handler(val) {
					console.log('val', val)
					this.cardStyleInfo.user.company = val
					this.setCardStyle()
				},
				deep: true
			},

			'identity': {
				handler(val) {
					console.log('val', val)
					this.cardStyleInfo.user.name = val.name
					this.setCardStyle()
				},
				deep: true
			},
			// 'form.mailbox': {
			// 	handler(val) {
			// 		console.log('mailbox', val)
			// 		this.cardStyleInfo.user.mailbox = val
			// 		this.setCardStyle()
			// 	},
			// 	deep: true
			// },
			//手机号
			'form.mobile': {
				handler(val) {
					console.log('mobile', val)
					this.cardStyleInfo.user.mobile = val
					this.setCardStyle()
				},
				deep: true
			},
			'privacyFrom.PhoneStatus': {
				handler(val) {
					console.log('mobile', val)
					this.userInfo.PhoneStatus = val
					this.setCardStyle()
				},
				deep: true
			},
			//邮箱
			'form.mailbox': {
				handler(val) {
					console.log('mailbox', val)
					this.cardStyleInfo.user.mailbox = val
					this.setCardStyle()
				},
				deep: true
			},
			'privacyFrom.mailboxStatus': {
				handler(val) {
					console.log('mobile', val)
					this.userInfo.mailboxStatus = val
					this.setCardStyle()
				},
				deep: true
			},
			//微信
			'form.wechat_number': {
				handler(val) {
					console.log('wechat_number', val)
					this.cardStyleInfo.user.wechat_number = val
					this.setCardStyle()
				},
				deep: true
			},
			'privacyFrom.wxStatus': {
				handler(val) {
					console.log('mobile', val)
					this.userInfo.wxStatus = val
					this.setCardStyle()
				},
				deep: true
			},
		},
		methods: {

			settrue() {
				this.is_onShow = true
			},
			add() {},
			geterr(e) {
				uni.showModal({
					content: JSON.stringify(e)
				})
			},
			pay() {
				if (this.info.vip === 0) {
					this.openMember(1)
					return
				}
				if (this.info.specifications_id === 0) {
					this.$u.toast('没有分类id，无法支付！')
					return
				}
				uni.navigateTo({
					url: '/pagesA/shopping/detail?type=5&id=' + this.info.goods_id +
						'&optherType=1&business_card_id=' + this.info.business_card
				})
			},
			gethead() {
				InformationBusinessCard({
					share_business_card_id: this.id
				}).then(res => {
					this.form.head = res.data.head
				})
			},
			reload() {
				InformationBusinessCard({
					share_business_card_id: this.id
				}).then(res => {
					this.info = res.data
					this.form.id = res.data.id
					this.form.nickname = res.data.nickname
					//身份
					// this.form.identity_id = res.data.identity_id
					// this.identity.name = res.data.identity === ' ' ? '无' : res.data.identity
					// this.identity.id = res.data.identity_id
					this.form.identity = res.data.identity
					//this.form.style = res.data.style
					this.form.company = res.data.company

					this.form.mobile = res.data.mobile
					this.form.mailbox = res.data.mailbox
					this.form.address = res.data.address
					this.form.lat = res.data.lat
					this.form.lng = res.data.lng
					this.form.is_certificate = res.data.is_certificate
					this.form.declaration = res.data.declaration
					this.form.sex = res.data.sex
					this.form.declaration = res.data.declaration
					this.form.wechat_number = res.data.wechat_number
					//背景
					this.background_img = res.data.background_img
					this.form.birthday = res.data.birthday
					this.form.years = res.data.years

					//企业简介
					this.form.enterprise = res.data.enterprise

					this.form.is_picture = res.data.is_picture

					this.circle_type = res.data.circle_type

					this.circle_id = res.data.circle_id
					this.getCardStyle(res.data.id)

					this.form.WeChat_QR_code = res.data.WeChat_QR_code

					//this.getGoodsRequest()
				})
			},
			// getGoodsRequest(){

			// 	if(!this.info.goods_id) return
			// 	distributionProductDetails({
			// 		id: this.info.goods_id
			// 	}).then(res => {
			// 		this.goodsInfo = res.data
			// 	})
			// },
			applyCertificate() {
				this.$refs.CertificateVueRef.show()
			},
			getLocation() {

				this.is_onShow = true
				openMap().then(res => {
					console.log('res', res)
					this.form.address = res.name
					this.form.lat = res.latitude
					this.form.lng = res.longitude
					console.log('this', this.form, res.address)
				})
			},
			openQrCodePopup() {
				this.$refs.QrCodePopupRef.show(this.form.WeChat_QR_code)
			},
			submitTb(e) {
				console.log('e', e)
				// InformationBusinessCard({
				// 	share_business_card_id: e
				// }).then(res=>{

				// })
				InformationBusinessCard({
					share_business_card_id: e
				}).then(res => {
					this.form.declaration = res.data.declaration
				})
				InformationCareer({
					business_card_id: e
				}).then(res => {
					if (Array.isArray(res.data) && res.data.length > 0) {
						this.career = res.data.map(i => ({
							label: i,
							show: false,
							isEdit: false
						}))
					} else {
						this.add()
					}
				})
			},
			openList() {
				this.$refs.addFriendsVueRef.show()
			},
			lvadd() {
				this.career.unshift({
					label: '',
					show: false,
					isEdit: true
				})
			},
			lvsetShow(it) {
				console.log('it', it)
				it.show = !it.show
			},
			lvsetEdit(it) {
				it.isEdit = true
				it.show = false
			},
			lvdel(index) {
				this.career.splice(index, 1)
			},
			lvsubmit() {
				return new Promise((resolve, reject) => {
					if (this.career.some(i => i.label === '')) {
						uni.showToast({
							duration: 3000,
							title: '请输入履历',
							icon: 'none'
						})
						reject()
						return
					}
					let data = {
						career: JSON.stringify(this.career.map(i => i.label)),
						business_card_id: this.id
					}
					uni.showLoading({
						mask: true
					})
					InformationEditCareer(data).then(res => {
						resolve()
					}).catch(err => {
						reject()
					})
				})

			},
			success() {
				return new Promise((resolve, reject) => {
					//判断是否有海报
					if (!this.info.poster) {
						//是否编辑海报
						uni.showModal({
							title: '',
							content: `是否编辑海报`,
							showCancel: true,
							cancelText: '否',
							confirmText: '是',
							confirmColor: '#12B475',
							success: res => {
								if (res.confirm) {
									resolve()
								} else if (res.cancel) {
									reject()
								}
							}
						});
					} else {
						reject()
					}

				})

			},
			openMember(type) {
				this.member_type = type
				this.$refs.MemberPopupVueRef.show()
			},
			openFile(e) {
				if (e === '') {
					this.$u.toast('地址为空！')
					return
				}
				uni.downloadFile({
					url: e,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			FileListVueChange(e) {

				card_circle_pdf({
					type: 3,
					b_id: this.id,
					pdf_id: e.id
				}).then(res => {
					uni.hideLoading()
					this.getFileList()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			changeMenu(e, item) {
				this.fileDel(item.id, item.type)
			},
			fileDel(pdf_id, type) {
				let params = {}
				if (type == 1) {
					params = {
						type: 4,
						b_id: this.id,
						pdf_id
					}
				} else {
					params = {
						type: 5,
						b_id: this.id,
						pdf_id
					}
				}
				uni.showLoading()
				card_circle_pdf(params).then(res => {
					uni.hideLoading()
					this.getFileList()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			openFilePopup() {
				this.$refs.FileListVueRef.show(this.circle.circle_pdf)
			},
			getFileList() {
				uni.showLoading()
				InformationUserBusinessCardHeadData({
					//user_id,
					business_card_id: this.id
				}).then(res => {
					uni.hideLoading()
					this.circle = res.data.circle
				}).catch(err => {
					uni.hideLoading()
				})
			},
			uploadPdf() {
				this.is_onShow = true
				uploadFile().then(res => {
					console.log('pdf', res)
					card_circle_pdf({
						type: 1,
						b_id: this.id,
						name: res.data.name,
						pdf: res.data.url
					}).then(res => {
						this.getFileList()
					})
				}).catch(({
					msg
				}) => {
					console.log('失败', msg)
					uni.showToast({
						duration: 3000,
						title: msg,
						icon: 'none'
					});
				})
			},
			btns(e) {

				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						duration: 3000,
						title: '已取消授权登录',
						icon: 'none'
					})

					return
				}

				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes);
						let data = {
							code: loginRes.code,
							user_id: this.info.id,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}

						uni.showLoading()
						LoginPhone(data).then(res => {
							uni.hideLoading()
							this.form.mobile = res.data
						})
					}
				});
			},
			onChooseAvatar(e) {


				ossUpload(e.detail.avatarUrl).then(res => {

					this.form.head = res.url

				}).catch(err => {

					uni.showToast({
						duration: 3000,
						title: '上传失败！',
						icon: 'none'
					})
				})


			},
			getCardStyle(user_id) {
				uni.showLoading()
				InformationUserBusinessCardHeadData({
					//user_id,
					business_card_id: this.id
				}).then(res => {
					this.cardStyleInfo = res.data
					this.setCardStyle()
				}).finally(err => {
					uni.hideLoading()
				})
			},
			setCardStyle() {
				this.$nextTick(() => {
					this.$refs.cardRef.show(this.cardStyleInfo.business_card_layout, this.cardStyleInfo.user, this
						.cardStyleInfo.user.user_img, this.userInfo)
				})
			},
			privacyChange(e, name) {
				console.log('e', e, name)
				this.privacyFrom[name] = e.detail.value ? 0 : 1
			},
			change(e) {
				console.log('e', e)
				this.form.birthday = e.detail.value
			},
			setSex(sex) {
				this.form.sex = sex
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/socialAccounts/socialAccounts?id=' + this.id
				})
			},
			toPage() {
				uni.navigateTo({
					url: '/pagesA/setCardStyle/setCardStyle?id=' + this.id
				})
			},
			toAddResume(id) {
				uni.navigateTo({
					url: '/pagesC/index/addResume?id=' + id
				})
			},
			open() {
				this.$refs.selectRef.show(this.circle_id)
			},
			// 上传
			selectClick(e) {
				uploadImg().then(res => {

					this.form.head = res.data.url
				})
			},
			async submit() {
				await this.$mValidate(
					[{
							require: true,
							key: 'head',
							message: '请选择头像'
						},
						{
							require: true,
							key: 'nickname',
							message: '请输入姓名'
						},
						// {
						// 	require: true,
						// 	key: 'company',
						// 	message: '请输入公司'
						// },
						{
							require: true,
							key: 'mobile',
							message: '请输入手机号'
						}
					], this.form)
				if (this.form.head === 'https://cos.dingquan.vip/wx-mini/static/avatar.png') {
					uni.showToast({
						duration: 3000,
						title: '请上传头像！',
						icon: 'none'
					})
					return false;
				}
				// if(this.userInfo.circle_id > 0) {

				// }

				if (this.form.identity === '') {
					uni.showToast({
						duration: 3000,
						title: '请选择领域！',
						icon: 'none'
					})
					return false;
				}

				await this.lvsubmit()
				let d = {
					PhoneStatus: this.privacyFrom.PhoneStatus,
					mailboxStatus: this.privacyFrom.mailboxStatus,
					wxStatus: this.privacyFrom.wxStatus
				}

				await InformationUserPrivacySetUp(this.privacyFrom)

				let data = {
					...this.form,
					// identity_id: this.identity.id,
					business_card_id: this.id
				}
				uni.showLoading({
					mask: true
				})
				InformationEditBusinessCard(data).then(res => {

					let form = {
						wechat_number: data.wechat_number,
						//WeChat_QR_code: ''
					}
					InformationWxeditWx(form).then(res => {
						this.setCardHttp()
					}).catch(err => {
						uni.hideLoading()
					})
					// uni.showToast({duration:3000,
					// 	title: '保存成功！',
					// 	icon: 'none'
					// })
					// uni.redirectTo({
					// 	url: '/pages/index/index'
					// })

				})
			},
			async setCardHttp() {
				this.$refs.cardRef.submit().then(data => {

					ossUpload(data, false).then(res => {
						let business_card_img = res.url
						let data = {
							style_id: this.cardStyleInfo.style_id,
							background_id: this.cardStyleInfo.background_id,
							user_img: this.cardStyleInfo.user.user_img,
							business_card_img,
							business_card_id: this.cardStyleInfo.business_card_id
						}
						InformationStyleSaving(data).then(res => {
							if (!this.cardStyleInfo.intercept) {
								this.template = {
									css: {
										// 根节点若无尺寸，自动获取父级节点
										width: '333rpx',
										height: '266.4rpx'
									},
									views: [
										//底图
										{
											type: 'image',
											src: this.cardStyleInfo.Template_img,
											css: {
												width: '100%',
												height: '100%',
												top: "0",
												right: "0",
												position: "absolute",
												zIndex: '5',
											}
										},
										//名片
										{
											type: 'image',
											src: business_card_img,
											css: {
												width: '333rpx',
												top: "0",
												right: "0",
												position: "absolute",
												zIndex: '4',
											}
										}
									]
								}
								this.$nextTick(() => {
									this.setShareCardHttp()
								})

							} else {

								uni.showToast({
									duration: 3000,
									title: '保存成功',
									icon: 'none'
								})
								setTimeout(() => {
									this.success().then(res => {
										uni.navigateTo({
											url: '/pagesA/posterDesign/posterDesign?id=' +
												this.info.business_card
										})
									}).catch(() => {
										this.$store.commit('setIsRefresh',
											true)
										uni.navigateBack()
									})

								}, 1500)

							}


						}).catch(err => {
							uni.hideLoading()
						})
					}).catch(err => {
						uni.showToast({
							duration: 3000,
							title: '上传失败！',
							icon: 'none'
						})
					})
				}).catch(err => {
					console.log('err', err)
					uni.showToast({
						duration: 3000,
						title: "未能生成，请重新保存!",
						icon: 'none'
					})
				})
			},
			async setShareCardHttp() {
				this.$refs.painterRef.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);

						// 非H5 保存到相册
						// H5 提示用户长按图另存

						ossUpload(res.tempFilePath, false).then(res => {
							let business_card_img = res.url
							let data = {
								share_id: this.cardStyleInfo.share_id,
								share_img: business_card_img,
								business_card_id: this.cardStyleInfo.business_card_id,
								intercept: this.cardStyleInfo.intercept
							}
						
							InformationShareStylesSaving(data).then(res => {
								uni.hideLoading()
								this.success().then(res => {

									uni.showToast({
										duration: 3000,
										title: '保存成功',
										icon: 'none'
									})
									setTimeout(() => {
										this.$store.dispatch('getShare')
										this.$store.commit('setIsRefresh',
											true)
										uni.navigateTo({
											url: '/pagesA/posterDesign/posterDesign?id=' +
												this.info
												.business_card
										})
									}, 1500)
								}).catch(() => {
									uni.showToast({
										duration: 3000,
										title: '保存成功',
										icon: 'none'
									})
									setTimeout(() => {
										this.$store.dispatch('getShare')
										this.$store.commit('setIsRefresh',
											true)
										uni.navigateBack()
									}, 1500)
								})



							})
						}).catch(err => {
							uni.showToast({
								duration: 3000,
								title: '上传失败！',
								icon: 'none'
							})
						})
					},
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #000;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.bg1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 494rpx;
		z-index: -2;
	}

	.content {
		width: 100%;
		position: relative;
		padding-top: 30rpx;

	}

	.bg2 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -3;
	}

	.setting {
		position: absolute;
		top: 0;
		left: 39rpx;

	}

	.hb-img {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
		position: relative;

		.real_name {
			// width: 83rpx;
			padding: 0 15rpx;
			height: 35rpx;
			background: #D2FCEC;
			border-radius: 5rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #23B97F;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 20rpx;
				margin-right: 6rpx;
			}
		}
	}

	.userinfo {
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(14, 67, 44, 0.15);
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 49rpx 56rpx;
		margin-bottom: 24rpx;

		.userinfo-name {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			color: #292929;
			margin-bottom: 16rpx;
		}

		.userinfo-zc {
			height: 21rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #F6F7F8;
			padding: 14rpx;
			margin-bottom: 23rpx;
			background: rgba(1, 8, 0, 0.5);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 25rpx;
		}

		.userinfo-gs {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #292929;
			margin-bottom: 42rpx;
		}

		.userinfo-zy {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;

			image {
				width: 28rpx;
				height: 25rpx;
				margin-right: 17rpx;
			}

			view {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}


		}

		.userinfo-zy:last-child {
			margin-bottom: 0;
		}
	}

	.form {
		width: 690rpx;
		margin: 0 auto;

		.form-list {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			.form-list-title {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EEEEEE;
				font-weight: bold;

				.card-title-r {
					display: flex;

					.card-title-r-item {
						display: flex;
						align-items: center;

						span {
							font-size: 26rpx;
							color: #23B97F;
						}
					}

					.card-title-r-item {
						margin-right: 20rpx;
					}

					.card-title-r-item:last-child {
						margin-right: 0;
					}
				}


			}

			.form-item {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 30rpx 0;

				.form-item-label {
					width: 150rpx;
					// font-weight: bold;

					text {
						color: red;
					}
				}

				.input {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.input-tx {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
						flex: 1;
						min-width: 0;
						margin-right: 30rpx;
					}

					input {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
						flex: 1;
						min-width: 0;
						margin-right: 30rpx;
					}

					.ac {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 28rpx;
						color: #999999;
					}

					image {
						width: 11rpx;
						height: 22rpx;
					}
				}

				.upload {
					.upload-item {
						width: 100%;
						display: flex;
						align-items: center;

						image {
							width: 88rpx;
							height: 88rpx;
							margin-right: 40rpx;
						}

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #23B97F;
						}
					}
				}

				.tx-r {
					.input-tx {
						text-align: right;
					}
				}

				.select {
					.input-tx {
						text-align: left;
					}
				}
			}

			.form-item:last-child {
				padding-bottom: 0;
			}

			.form-list-add {
				height: 170rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					margin-right: 20rpx;
					height: 28rpx;
				}

				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #23B97F;
			}

			.form-list-c {
				height: 170rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding-top: 20rpx;

				.form-list-c-add {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #23B97F;
					text-align: center;
					margin-bottom: 10rpx;
				}

				.form-list-c-tx {
					view {
						color: #555;
						text-align: center;
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 24rpx;
					}
				}
			}

			.form-list-files {
				width: 100%;

				.form-list-files-item {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.form-list-files-item-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.form-list-files-item-c {
						flex: 1;
						min-width: 0;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						height: 100rpx;
						margin: 0 20rpx;

						.form-list-files-item-c-t {
							width: 100%;
							display: flex;
							align-items: center;

							.form-list-files-item-c-title {
								flex: 1;
								min-width: 0;
								width: fit-content;
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
							}

							.form-list-files-item-c-project {
								font-size: 32rpx;
								color: #23B97F;
								width: 96rpx * 2;
								font-weight: bold;
							}
						}

						.form-list-files-item-c-time {
							font-size: 26rpx;
							color: #555;
						}
					}

					.form-list-files-item-r {
						height: 100rpx;
						width: 50rpx;

					}
				}

				.form-list-files-item:first-child {
					padding-top: 20rpx;
				}

				.form-list-files-item:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.form-btn {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;
	}

	.lvli {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 38rpx 26rpx;
		// margin-top: 121rpx;

		.lvli-list {
			display: flex;

			.lvli-list-left {
				width: 30rpx;
				height: auto;
				position: relative;

				.lvli-list-spot {
					width: 30rpx;
					height: 30rpx;
				}

				.lvli-list-line {
					width: 1rpx;
					height: calc(100% - 60rpx);
					background: #FFCC02;
					position: absolute;
					top: 30rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin-top: 20rpx;
					margin: auto;
					transform: translateX(-50%);
				}
			}

			.lvli-list-rig {
				flex: 1;
				margin-left: 21rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #131313;
				padding-bottom: 81rpx;
			}
		}
	}

	textarea {
		width: 100%;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #131313;
		height: 200rpx;
		box-sizing: border-box;
		padding: 15rpx;
		background: #F6F7F8;
		letter-spacing: 2rpx;
	}

	.ac {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #131313;
	}

	.radio {
		display: flex;
		align-items: center;
		justify-content: start !important;
	}

	.input-radio {
		width: 130rpx;
		height: 52rpx;
		background: #E9E9E9;
		border-radius: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;

		image {
			width: 30rpx !important;
			height: 30rpx !important;
			margin-right: 7rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;

		}
	}

	.input-radio-ac {
		background: #D3FFEE;
		color: #23B97F;
	}

	.select {
		.input-tx {
			text-align: right;

		}
	}

	.input-subTitle {
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 28rpx;
		color: #999999;
		width: 56px;
	}

	.chooseavatar {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #23B97F;
		margin: 0;
	}

	button {
		border-radius: 30rpx;
		height: 80rpx !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		background-color: rgba(0, 0, 0, 0) !important;
		color: #23B97F !important;
		font-family: PingFang SC !important;
		display: flex;
		align-items: center;
	}

	button:after {
		top: 0;
		left: 0;
		border: 1px solid rgba(0, 0, 0, 0) !important;
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.form-list-title-r {
		font-weight: 300;
		font-size: 26rpx;
		color: #23B97F;
	}

	.del {
		color: #e4393c;
		font-size: 22rpx;
	}

	.lvli {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 38rpx 26rpx;


		.lvli-list {
			display: flex;

			.lvli-list-left {
				width: 30rpx;
				height: auto;
				position: relative;

				.lvli-list-spot {
					width: 30rpx;
					height: 30rpx;
				}

				.lvli-list-line {
					width: 1rpx;
					height: calc(100% - 60rpx);
					background: #FFCC02;
					position: absolute;
					top: 30rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin-top: 20rpx;
					margin: auto;
					transform: translateX(-50%);
				}
			}

			.lvli-list-rig {
				flex: 1;
				margin-left: 21rpx;

				padding-bottom: 81rpx;

				.lvli-list-rig-btn {
					width: 488rpx;
					height: 80rpx;
					background: #EFEFEF;
					border-radius: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 27rpx;
						height: 27rpx;
					}
				}

				.lvli-list-rig-content {
					width: 100%;
					display: flex;
					position: relative;

					.lvli-list-rig-tx {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						flex: 1;
					}

					image {
						width: 42rpx;
						height: 42rpx;
					}

					.lvli-list-rig-content-edit {
						display: flex;
						width: 277rpx;
						height: 75rpx;
						background: #EAEAEA;
						border-radius: 20rpx;
						position: absolute;
						bottom: -23px;
						right: 27px;
						box-sizing: border-box;
						padding: 15rpx 0;

						view {
							flex: 1;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;

							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 12rpx;
							}

							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #292929;
						}

						view:first-child::after {
							content: "";
							width: 1rpx;
							height: 100%;
							background: #908E8E;
							position: absolute;
							right: 0;
							top: 0;
						}
					}
				}

				.lvli-list-rig-input {
					display: flex;
					textarea {
						flex: 1;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						height: 200rpx;
						box-sizing: border-box;
						padding: 15rpx;
						background: #F6F7F8;
					}
					&>view{
						margin-left: 10rpx;
						width: 36rpx;
						height: 36rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}

					.ac {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
					}
				}
			}
		}
	}

	.icon {
		padding: 0 10rpx 0 15rpx;
		border-left: 1rpx solid #d8d8d8;
	}

	.map-r {
		width: 30rpx !important;
	}

	.card-certificate {
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		padding-top: 20rpx;

		.card-certificate-item {
			display: inline-block;
			margin-right: 30rpx;
			width: 190rpx;

			.card-certificate-item-img {
				width: 100%;
				margin-bottom: 10rpx;

				image {
					width: 100%;
				}
			}

			.card-certificate-item-tx {
				font-size: 28rpx;
				color: #8f8f8f;
				text-align: center;
				margin-bottom: 10rpx;
			}

			.card-certificate-item-time {
				font-size: 24rpx;
				color: #12B475;
				text-align: center;
			}

			.card-certificate-item-switch {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #12B475;
				font-size: 24rpx;
			}
		}
	}

	.vip {
		// padding: 30rpx;
		// background: #F2F2F3;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			// margin-right: 20rpx;
			border-radius: 20rpx;
		}
	}
</style>